const componentMapping = {
  form: 'TForm',
  formItem: 'TFormItem',
  input: 'TInput',
  number: 'TInputNumber',
  textarea: 'TTextarea',
  row: 'TRow',
  col: 'TCol',
  button: 'TButton',
  select: 'TSelect',
  option: 'TOption',
  selectV2: 'TSelectV2',
  switch: 'TSwitch',
  time: 'TTimePicker',
  timeSelect: 'TTimePicker',
  date: 'TDatePicker',
  year: 'TDatePicker',
  month: 'TDatePicker',
  week: 'TDatePicker',
  dateTime: 'TDatePicker',
  dateRange: 'TDateRangePicker',
  // weekRange: 'TDateRangePicker',
  monthRange: 'TDateRangePicker',
  yearRange: 'TDateRangePicker',
  dateTimeRange: 'TDateRangePicker',
  radioGroup: 'TRadioGroup',
  radio: 'TRadio',
  radioButton: 'TRadioButton',
  checkboxGroup: 'TCheckboxGroup',
  checkbox: 'TCheckbox',
  cascader: 'TCascader',
  rate: 'TRate',
  slider: 'TSlider',
  transfer: 'TTransfer',
  upload: 'TUpload',
  avatar: 'TAvatar',
  badge: 'TBadge',
  color: 'TColorPicker',
  container: 'TContainer',
  header: 'THeader',
  main: 'TMain',
  footer: 'TFooter',
  aside: 'TAside',
  calendar: 'TCalendar',
  card: 'TCard',
  carousel: 'TSwiper',
  carouselItem: 'TSwiperItem',
  collapse: 'TCollapse',
  collapseItem: 'TCollapseItem',
  descriptions: 'TDescriptions',
  descriptionsItem: 'TDescriptionsItem',
  empty: 'TEmpty',
  progress: 'TProgress',
  result: 'TResult',
  skeleton: 'TSkeleton',
  skeletonItem: 'TSkeletonItem',
  table: 'TTable',
  tableV2: 'TTableV2',
  tableColumn: 'TTableColumn',
  tag: 'TTag',
  timeLine: 'TTimeline',
  tree: 'TTree',
  treeV2: 'TTreeV2',
  treeSelect: 'TTreeSelect',
  divider: 'TDivider',
  affix: 'TAffix',
  backTop: 'TBackTop',
  breadcrumb: 'TBreadcrumb',
  breadcrumbItem: 'TBreadcrumbItem',
  dropdown: 'TDropdown',
  dropdownMenu: 'TDropdownMenu',
  dropdownItem: 'TDropdownItem',
  menu: 'TMenu',
  menuItem: 'TMenuItem',
  subMenu: 'TSubMenu',
  icon: 'TIcon',
  pageHeader: 'TPageHeader',
  steps: 'TSteps',
  step: 'TStep',
  tabs: 'TTabs',
  tabPane: 'TTabPane',
  alert: 'TAlert',
  dialog: 'TDialog',
  drawer: 'TDrawer',
  popConfirm: 'TPopConfirm',
  popover: 'TPopover',
  tooltip: 'TTooltip',
};

const emitMapping = {
  'update:modelValue': [
    'input',
    'textarea',
    'select',
    'switch',
    'number',
    'selectV2',
    'time',
    'timeSelect',
    'radioGroup',
    'radio',
    'radioButton',
    'checkboxGroup',
    'checkbox',
    'cascader',
    'rate',
    'slider',
    'transfer',
    'color',
    'collapse',
    'treeSelect',
    'tabs',
    'dialog',
    'drawer',
    'date',
    'year',
    'month',
    'week',
    'dateTime',
    'dateRange',
    'weekRange',
    'monthRange',
    'yearRange',
    'dateTimeRange',
  ],
  'update:visible': ['popover', 'tooltip'],
};

const placeholderMapping = {
  input: (label: string) => '请输入' + label,
  checkbox: (label: string) => '请选择' + label,
  checkboxGroup: (label: string) => '请选择' + label,
  radio: (label: string) => '请选择' + label,
  radioGroup: (label: string) => '请选择' + label,
  textarea: (label: string) => '请输入' + label,
  search: (label: string) => '请选择' + label,
  number: (label: string) => '请输入' + label,
  select: (label: string) => '请选择' + label,
  selectV2: (label: string) => '请选择' + label,
  time: (label: string) => '请选择' + label,
  timeSelect: (label: string) => '请选择' + label,
  cascader: (label: string) => '请选择' + label,
  treeSelect: (label: string) => '请选择' + label,
  date: (label: string) => '请选择' + label,
  year: (label: string) => '请选择' + label,
  month: (label: string) => '请选择' + label,
  week: (label: string) => '请选择' + label,
  dateTime: (label: string) => '请选择' + label,
  dateRange: () => ['开始时间', '结束时间'],
  weekRange: () => ['开始时间', '结束时间'],
  monthRange: () => ['开始时间', '结束时间'],
  yearRange: () => ['开始时间', '结束时间'],
  dateTimeRange: () => ['开始时间', '结束时间'],
};

const modelMapping = {
  input: 'modelValue',
  textarea: 'modelValue',
  switch: 'modelValue',
  select: 'modelValue',
  number: 'modelValue',
  selectV2: 'modelValue',
  time: 'modelValue',
  timeSelect: 'modelValue',
  radio: 'modelValue',
  radioButton: 'modelValue',
  radioGroup: 'modelValue',
  checkbox: 'modelValue',
  checkboxGroup: 'modelValue',
  cascader: 'modelValue',
  rate: 'modelValue',
  slider: 'modelValue',
  transfer: 'modelValue',
  color: 'modelValue',
  treeSelect: 'modelValue',
  date: 'modelValue',
  year: 'modelValue',
  month: 'modelValue',
  week: 'modelValue',
  dateTime: 'modelValue',
  dateRange: 'modelValue',
  weekRange: 'modelValue',
  monthRange: 'modelValue',
  yearRange: 'modelValue',
  dateTimeRange: 'modelValue',
};

const defaultValueMapping = {
  input: '',
  textarea: '',
  number: 0,
};

const defaultRequiredRuleMapping = {
  '*'(config: { [key: string]: any }, message: string | string[]) {
    if (config.required) {
      return [
        {
          required: true,
          message: Array.isArray(message) ? message.join('-') : message,
          trigger: 'change',
          type: 'error',
        },
        {
          required: true,
          message: Array.isArray(message) ? message.join('-') : message,
          trigger: 'blur',
          type: 'error',
        },
      ];
    }
    return [];
  },
};

export default {
  componentMapping,
  emitMapping,
  placeholderMapping,
  modelMapping,
  defaultValueMapping,
  defaultRequiredRuleMapping,
  formMapping: {
    prop: 'name',
    model: 'data',
  },
};
